<template>
  <div class="shopcar">
    <!-- 顶部 -->
    <van-nav-bar 
    title="购物车" 
    fixed />
    <div style="width: 100%; height: 40px"></div>

    <!-- 菜单栏 -->
    <van-checkbox-group class="checkbox" v-model="selGoods">
      <van-swipe-cell v-for="(item, index) in carts" :key="index">
        
          <van-row>
            <van-col span="2" class="leftbox">
              <van-checkbox :name="item"></van-checkbox>
            </van-col>
            <van-col span="22">
              <van-card 
                :price="item.price"
                :title="item.title"
                class="goods-card"
                :thumb="path + item.img"
              >
                <template #num>
                  <van-stepper v-model="item.nn" :max="item.num" min="0" />
                </template>
              </van-card>
            </van-col>
          </van-row>
 
      </van-swipe-cell>
    </van-checkbox-group>
    <div style="width: 100%; height: 100px"></div>
    <!-- 底部 -->

    <van-submit-bar
      class="bar"
      :price="total"
      button-text="提交订单"
      @submit="onSubmit(total)"
    >
      <van-checkbox v-model="selAll" @click="checkAll">全选</van-checkbox>
    </van-submit-bar>

    <my-bottom :active="2"></my-bottom>
  </div>
</template>

<script>
import MyBottom from "@/components/MyBottom.vue";
import axios from "axios";
import { mapState } from "vuex";
import { Dialog } from 'vant';



export default {
  components: { MyBottom },
  computed: {
    ...mapState({
          path: (state) => state.path,
        }),
      },
  data() {
    return {
      carts:[],
      props: ["active"],
      selAll: false,
      selGoods: [],
      total: 0,
      num: 1,
    };
  },
  methods: {
    onSubmit(total) {
      Dialog.alert({
        message: '总价：'+ total + '\n商品已发货，请耐心等待',
      }).then(() => {
        // on close
      });
    },
    checkAll() {
      if (this.selAll) {
        this.selGoods = this.carts;
      } else {
        this.selGoods = [];
      }
    },
  },
  created() {
    axios
      .get("/api/shopnews.php")
      .then((response) =>{
        console.log(this);
        this.carts = response.data.data;
      })
      .catch(function (error) {
        console.log(error);
      });
  },
  watch: {
    selGoods: {
      handler(arr) {
        this.total = 0;
        arr.forEach((item) => {
          // console.log(item.num*item.price)
          this.total += item.nn * item.price * 100;
        });

        if (arr.length === this.carts.length) {
          this.selAll = true;
        } else {
          this.selAll = false;
        }
      },
      deep: true,
    },
  },
};
</script>


<style scoped>
.shopcar {
  background: rgb(242, 240, 243);
}
>>> .van-nav-bar{
  background: rgb(24, 154, 100);
}
>>> .van-nav-bar__title {
  font-size: 18px;
  color: rgb(255, 255, 255);
}

.goods-card {
  margin: 0 0 10px 0;
  height: 120px;
  background-color: white;
  border-radius: 0px 10px 10px 0px;
  font-size: 16px;
}

.delete-button {
  height: 100%;
}
.van-row {
  margin: 3px 0px;
}
.checkbox{
  margin-top: 20px;
  margin-bottom: 30px;
}
.leftbox {
  background-color: white;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px 0px 0px 10px;
  
}
.bar {
  bottom: 50px;
}
</style>

